/* 
    Document   : style
    Created on : 25 avr. 2011, 17:12:42
    Author     : simon
    Description:
        Purpose of the stylesheet follows.
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

root { 
    display: block;
}

a{text-decoration:none; cursor:pointer; color: black;}
a:hover, a:active, a:visited {color : #000;}

*{
    margin: 0;
    padding: 0;
}

img { border: 0; }

html{
    height: 100%;
    background-color: #fbf5cd;
    font-family: Arial, Helvetica;
}

body {
    background: url("../icon/bg.png") top no-repeat;
    height: 100%;
    font-size:18px;
}

#wrapper{
    position : relative;
    width: 900px;
    margin:auto;
    min-height: 100%;
}

#accountLabel {float: left; font-size: 14px; position: relative; top: 10px;}

/* Styles specifique au HEADER */
#header {
    height: 220px;
}

#header #logo {
    background: url("../icon/logo.png") left no-repeat;
    width: 200px;
    padding-left: 80px;
    float:left;
    position: relative;
    top : 40px;
    left: 0%;
    font-size: 52px;
}

#header #widget {float:right; font-size: 14px; position:relative; width: 500px;}
#header #widget div {float:left; margin: 10px 0px 0px 0px;}
#header #widget #cart {width: 350px;}
#header #widget #sign img {float:left;}
#header #widget #bagImage, #header #widget #sign img{float:left; position: relative; top: -5px; margin-right: 10px;}

#header #menu {clear: both; float: right;}

#header #contactForm {
    height:277px;
    width:351px;
    background: black;
    display:none;
}

/* Styles specifique au CONTENT */
#content {
    clear: both;
    min-height: 400px;
    margin: 0 0 20px 0;
}

#content .home-vignette {
    float: left;
    margin: 30px;
    width: 232px;
    height: 262px;
    overflow: hidden;
    background: #fff;
    -moz-box-shadow: 2px 2px 10px #888;
    -webkit-box-shadow: 2px 2px 10px #888;
    box-shadow: 2px 2px 10px #888;
}
#content .home-vignette img {margin: 15px;}
#content .home-vignette .image-desc {
    height:80px;
    padding:0 10px;
    opacity:.8;
    color:#fff;
    background:#000;
    font-style: italic;
    -webkit-transition: margin-top .2s ease-out;
    -moz-transition: margin-top .2s ease-out;
    transition: margin-top .2s ease-out;
}

#content .home-vignette:hover .image-desc {margin-top:-80px;}
#content .home-vignette h3 {color: #8e3d3d; text-align: right;}

/* PRODUCT */
#products {width: 780px; margin: auto;}

#productsRegion {float: right; width : 70%;}

.item {
    margin: 10px;; padding: 5px;
    float: left;
    position: relative;  /* Set the absolute positioning base coordinate */
    width: 220px;
    height: 260px;
}

.item.hover{background-color: black;}

.item img {
    width: 200px; height: 200px; /* Set the small thumbnail size */
    -ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
    border: 1px solid #ddd;
    padding: 5px;
    background: #f0f0f0;
    position:relative;
    left: 4px;
}

.item div {float: left; font-size: 14px; margin: 10px 0;}

#product {
    background: white;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    margin: 0 0 20px 0;
    padding : 30px;

    float:left;
}

#product #details {float: right; width: 450px;padding: 0 20px;}
#product #details div {clear: both; margin: 30px 10px;}
#product .images {float:left;width: 350px;}
#product .images img {width:300px; border: 1px solid #ddd; padding: 5px; background: #f0f0f0;}
#product .images .thumb {float:left; margin: 10px 0;}
#product .images .thumb img{float:left; width: 100px; height: 100px; margin: 0 5px; border: 2px gray solid;}

/* CART  */
#cartTable {width: 90%;border: none; background: white; padding: 15px 0;}
#cartTable tr { border-bottom: #8CA3AF;}
#cartTable tr td {padding: 2px 20px;}
#cartTable img {width: 52px; height: 52px; border: 1px solid #ddd;padding: 3px;background: #f0f0f0;}


#actionBar {float: right;}
.infoH4 {margin:10px 0;}

#category {float : left; height: 100%;}
#category ul li {float : left; list-style: none; clear: both; margin: 8px 0;}
#category ul li.currentCat {font-size: 24px;}
/* FOOTER */
#footer{
    bottom: 0px;
    height: 58px;
    width: 100%;
    font-size: 12px;
    float: left;
}

#created {position : relative;float : left;}
#info {float : right;position : relative; right : 90px; font-style: italic;}


/* DIVERS */
.normal {font-size: 16px;}
.smallText{font-size: 12px;}
.lightgrey {background: #dfdfdf;}
.white {background: #fff;}
.rounded {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.bubble {background: #bd6666; padding: 5px; margin-right: 10px;}
.bubble a {font-weight: bold;}
.bubble a:hover {text-decoration: underline;}

.shadow {
    -moz-box-shadow: 2px 2px 10px #888;
    -webkit-box-shadow: 2px 2px 10px #888;
    box-shadow: 2px 2px 10px #888;
}
.icon {width: 24px; height:24px;}

.divCheckout {margin: 10px; padding : 20px; float:left;}


/***** ACCOUNT ******/
#addForm { border:solid 2px #b7ddf2; background: #ebf4fb; width:90%; margin: auto;padding: 10px 20px; margin-bottom: 20px;}
.accountInfo {
    margin: 20px;
    padding: 10px 20px;
    width : 40%;
    float : left;
}

.accountOrder {
    float:left;
    margin: 20px;
    padding: 10px 20px;
}

.accountInfo table , .accountOrder table  {
    border: grey dashed 2px;
    margin: 2px 0;
}
#ecom-process ul {list-style: none;}
#ecom-process ul li {float:left; width: 30%; font-size: 26px; margin: 0 2px; padding: 5px 10px;}
#ecom-process ul li.selected {font-weight: bold; background: #bd6666;}


/* PANEL INFO */
.panelInfo {
    width : 98%;
    margin : 10px auto;
    padding: 5px 10px;
}

.panelInfo div {padding: 15px;}

#errorMessage {
    background-color: #db7272;
    border : solid 2px #a93a3a;
    color : white;
}

#infoMessage {border:solid 2px #b7ddf2; background: #ebf4fb;}
#infoMessage div {background: #ebf4fb url("../icon/check.gif") no-repeat left; padding-left: 35px; }
/******* LAVALAMP ******/
.lava {position:relative; top:40px;}
.lava li {
    float: left;
    list-style: none;
}
.lava li.back {
    background-color: #bd6666;
    width: 9px;
    height: 30px;
    position: absolute;

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.lava li a {
    font: bold 14px arial;
    text-decoration: none;
    color: #000;
    outline: none;
    text-align: center;
    top: 7px;
    text-transform: uppercase;
    letter-spacing: 0;
    z-index: 20;
    display: block;
    float: left;
    height: 30px;
    position: relative;
    overflow: hidden;
    margin: auto 10px;
    font-size:20px;
}
.lava li a:hover, .lava li a:active, .lava li a:visited {
    border: none;
}


/********* POUR LE FORMULAIRE DE LOGIN *********/
.panel_button {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 173px;
    height: 35px;
    background: url(../icon/panel_button.png) bottom;
    z-index: 100;
    filter:alpha(opacity=95);
    -moz-opacity:0.95;
    -khtml-opacity: 0.95;
    opacity: 0.85;
    cursor: pointer;
}
.panel_button img {
    position: relative;
    top: 5px;
    border: none;
    widht: 24px; 
    height: 24px;
}
.panel_button a {
    text-decoration: none;
    color: #545454;
    font-size: 16px;
    font-weight: bold;
    position: relative;
    left: 10px;
    font-family: Arial, Helvetica, sans-serif;
}
.panel_button a:hover {
    color: #999999;
}


#toppanel {
    position: absolute;
    width: 173px;
    left: 0px;
    z-index: 100;
    text-align: center;
}
#panel {
    background: black;
    filter:alpha(opacity=95);
    -moz-opacity:0.95;
    -khtml-opacity: 0.95;
    opacity: 0.95;

    width: 400px;
    position: relative;
    height: 0px;
    margin-left: auto;
    margin-right: auto;
    z-index: 90;
    overflow: hidden;
    text-align: left;
}

#panel h1 {
    text-align: center;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    color: white;
    font-weight: normal;
    line-height: 35px;
    position: absolute;
    top: 10px;
    left : 40px;
}

.border {
    border: 15px #1d1d1d solid;
}
img.border {
    float: left;
    margin-right: 15px;
    margin-bottom: 8px;
}

div#login {
    width: 240px;
    height: 150px;
    position: absolute;
    left: 60px;
    top: 60px;
    background: #46392f;
    text-align: left;
    padding-left: 10px;
}
div#login p {
    color: #CCCCCC;
    font-family: Century Gothic, Georgia, "Times New Roman", Times, serif;
    line-height: 25px;
}
div#login input#password {
    position: relative;
    right: -6px;
}
div#login input#login_btn {
    border: 1px #899690 solid;
    cursor: pointer;
    position: relative;
    top: 30px;
    left: 86px;
}
